TypeScript 与 Vue 教程

1. Vue.js 简介和特性

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。它易于上手，同时提供了丰富的功能，如组件化开发、响应式数据绑定、虚拟 DOM 等。Vue.js 的核心库只关注视图层，可以轻松与其他库或现有项目集成。

主要特性：

• 组件化开发：将界面拆分为独立的组件，便于复用和维护。
• 响应式数据绑定：数据与视图自动同步，简化状态管理。
• 虚拟 DOM：高效地更新和渲染 DOM，提升性能。

2. 开发环境搭建

2.1 Vue CLI

Vue CLI 是一个官方提供的脚手架工具，用于快速搭建 Vue 项目。

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

2.2 Vite

Vite 是一个新的前端构建工具，由 Vue 作者尤雨溪开发。它提供了极快的冷启动和热更新。

npm init vite@latest my-project --template vue
cd my-project
npm install
npm run dev

3. 创建第一个 Vue 应用

<div id="app">
  {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

4. Vue 实例和生命周期

Vue 实例是 Vue 应用的核心，它包含数据、方法和生命周期钩子。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created() {
    console.log('Vue instance created');
  },
  mounted() {
    console.log('Vue instance mounted');
  }
});

5. 模板语法和数据绑定

Vue 使用双大括号 {{ }} 进行文本插值，使用 v-bind 进行属性绑定。

<div id="app">
  <p>{{ message }}</p>
  <img v-bind:src="imageUrl" alt="Vue logo">
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      imageUrl: 'https://vuejs.org/images/logo.png'
    }
  });
</script>

6. 组件化开发

组件是 Vue 的核心概念之一，可以将界面拆分为独立的、可复用的组件。

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello from component!'
    };
  }
});

new Vue({
  el: '#app'
});

7. 组件通信

7.1 Props

父组件通过 props 向子组件传递数据。

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

new Vue({
  el: '#app',
  data: {
    parentMessage: 'Hello from parent!'
  }
});

7.2 Events

子组件通过 $emit 向父组件发送事件。

Vue.component('child-component', {
  template: '<button @click="sendMessage">Send</button>',
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child!');
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
});

7.3 Provide/Inject

用于跨层级组件通信。

new Vue({
  el: '#app',
  provide: {
    message: 'Hello from root!'
  }
});

Vue.component('child-component', {
  inject: ['message'],
  template: '<div>{{ message }}</div>'
});

8. 计算属性和侦听器

8.1 计算属性

计算属性是基于依赖缓存的属性，只有依赖变化时才会重新计算。

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

8.2 侦听器

侦听器用于监听数据变化并执行相应操作。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    }
  }
});

9. 条件渲染和列表渲染

9.1 条件渲染

使用 v-if、v-else-if 和 v-else 进行条件渲染。

<div id="app">
  <p v-if="showMessage">Message is shown</p>
  <p v-else>Message is hidden</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      showMessage: true
    }
  });
</script>

9.2 列表渲染

使用 v-for 进行列表渲染。

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  });
</script>

10. 表单输入绑定

使用 v-model 进行双向数据绑定。

<div id="app">
  <input v-model="message" placeholder="Enter message">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    }
  });
</script>

11. 单文件组件 (.vue 文件)

单文件组件将模板、脚本和样式封装在一个文件中，便于维护。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from SFC!'
    };
  }
};
</script>

<style scoped>
p {
  color: blue;
}
</style>

12. 组件注册 (全局和局部)

12.1 全局注册

Vue.component('my-component', {
  template: '<div>Global Component</div>'
});

new Vue({
  el: '#app'
});

12.2 局部注册

import MyComponent from './MyComponent.vue';

new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  }
});

13. Scoped CSS

Scoped CSS 确保样式只作用于当前组件。

<template>
  <div class="message">
    <p>{{ message }}</p>
  </div>
</template>

<style scoped>
.message p {
  color: red;
}
</style>

14. CSS 预处理器 (Sass, Less)

使用 Sass 或 Less 编写样式。

<template>
  <div class="message">
    <p>{{ message }}</p>
  </div>
</template>

<style lang="scss" scoped>
$primary-color: blue;

.message p {
  color: $primary-color;
}
</style>

15. 动态样式和类绑定

使用 v-bind:class 和 v-bind:style 动态绑定样式和类。

<div id="app">
  <div :class="{ active: isActive }" :style="{ color: textColor }">
    Dynamic Styling
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isActive: true,
      textColor: 'green'
    }
  });
</script>

16. Vue Router

Vue Router 是 Vue.js 的官方路由管理器。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  router
});

17. Vuex 状态管理

Vuex 是 Vue.js 的官方状态管理库。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

new Vue({
  el: '#app',
  store
});

18. 混入 (Mixins)

混入用于复用组件逻辑。

const myMixin = {
  created() {
    console.log('Mixin created');
  }
};

new Vue({
  el: '#app',
  mixins: [myMixin]
});

19. 自定义指令

自定义指令用于操作 DOM。

Vue.directive('focus', {
  inserted(el) {
    el.focus();
  }
});

new Vue({
  el: '#app'
});

20. 插件系统

插件用于扩展 Vue 功能。

const MyPlugin = {
  install(Vue) {
    Vue.mixin({
      created() {
        console.log('Plugin installed');
      }
    });
  }
};

Vue.use(MyPlugin);

new Vue({
  el: '#app'
});

21. 虚拟 DOM 和 diff 算法

虚拟 DOM 是 Vue 的核心概念之一，用于高效地更新和渲染 DOM。diff 算法用于比较新旧虚拟 DOM 树，找出需要更新的部分。

22. 异步组件

异步组件用于按需加载组件。

const AsyncComponent = () => import('./AsyncComponent.vue');

new Vue({
  el: '#app',
  components: {
    'async-component': AsyncComponent
  }
});

23. keep-alive 组件缓存

<keep-alive> 用于缓存组件实例，避免重复渲染。

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

24. 懒加载和代码分割

使用 import() 进行懒加载和代码分割。

const AsyncComponent = () => import('./AsyncComponent.vue');

25. Vue DevTools

Vue DevTools 是 Vue.js 的官方调试工具，用于调试 Vue 应用。

26. Vue Test Utils

Vue Test Utils 是 Vue.js 的官方测试工具库，用于编写单元测试。

27. Vue CLI

Vue CLI 是一个官方提供的脚手架工具，用于快速搭建 Vue 项目。

28. Nuxt.js (Vue.js 服务端渲染框架)

Nuxt.js 是一个基于 Vue.js 的服务端渲染框架，用于构建 SEO 友好的应用。

29. 项目结构组织

良好的项目结构有助于维护和扩展。

my-project/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── store/
│   ├── router/
│   ├── main.js
├── package.json

30. 代码风格和规范

使用 ESLint 和 Prettier 保持代码风格一致。

31. 错误处理和调试技巧

使用 try-catch 和 Vue DevTools 进行错误处理和调试。

32. 性能优化策略

• 使用 v-if 替代 v-show
• 使用 keep-alive 缓存组件
• 使用懒加载和代码分割

33. TypeScript 与 Vue

TypeScript 是 JavaScript 的超集，提供了静态类型检查。Vue 3 对 TypeScript 有更好的支持。

33.1 安装 TypeScript

npm install -D typescript

33.2 配置 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

33.3 使用 TypeScript 编写 Vue 组件

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello from TypeScript!'
    };
  }
});
</script>

34. 渲染函数和 JSX

渲染函数用于手动创建虚拟 DOM。

export default {
  render(h) {
    return h('div', 'Hello from render function');
  }
};

35. 服务端渲染 (SSR)

服务端渲染用于提升首屏加载速度和 SEO。

const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();

const app = new Vue({
  template: '<div>Hello from SSR</div>'
});

renderer.renderToString(app, (err, html) => {
  if (err) throw err;
  console.log(html);
});

36. 静态站点生成 (SSG)

静态站点生成用于生成静态 HTML 文件。

37. 待办事项应用

创建一个简单的待办事项应用。

38. 博客系统

创建一个简单的博客系统。

39. 电商网站前端

创建一个简单的电商网站前端。

40. 常用 UI 组件库 (Element UI, Vuetify)

使用 Element UI 或 Vuetify 快速构建 UI。

41. 状态管理替代方案 (Pinia)

Pinia 是一个轻量级的状态管理库，用于替代 Vuex。

42. 社区插件和资源

探索 Vue 社区的插件和资源。

43. 官方文档和学习资源

参考 Vue 官方文档和学习资源。

44. Composition API

Composition API 是 Vue 3